<template>
  <div class="page">
    <el-form
      size="small"
      :inline="true"
      class="query-form"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter.native="refreshList()"
      @submit.native.prevent
    >
      <!-- 搜索框-->
      <el-form-item prop="title">
        <el-input
          size="small"
          v-model="searchForm.title"
          placeholder="标题"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="content"> </el-form-item>
      <el-form-item prop="newsType">
        <el-select
          v-model="searchForm.newsType"
          placeholder="请选择资讯类型"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in $dictUtils.getDictList('news_type')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="author">
        <el-input
          size="small"
          v-model="searchForm.author"
          placeholder="作者"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="source">
        <el-input
          size="small"
          v-model="searchForm.source"
          placeholder="来源"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="showtype">
        <el-select
          v-model="searchForm.showtype"
          placeholder="请选择展示范围"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in $dictUtils.getDictList('show_pc')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="refreshList()" size="small"
          >查询</el-button
        >
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 导入导出-->
    <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
      <el-form
        size="small"
        :inline="true"
        v-show="isImportCollapse"
        ref="importForm"
      >
        <el-form-item>
          <el-button type="default" @click="downloadTpl()" size="small"
            >下载模板</el-button
          >
        </el-form-item>
        <el-form-item prop="loginName">
          <el-upload
            class="upload-demo"
            :action="`${this.$http.BASE_URL}/dlyrl/hr/news/news/import`"
            :on-success="uploadSuccess"
            :show-file-list="true"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="bg-white top">
      <el-row>
        <el-button
          v-if="hasPermission('dlyrl:hr:news:news:add')"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="add()"
          >新建</el-button
        >
        <el-button
          v-if="hasPermission('dlyrl:hr:news:news:edit')"
          type="warning"
          size="small"
          icon="el-icon-edit-outline"
          @click="edit()"
          :disabled="dataListSelections.length != 1"
          plain
          >修改</el-button
        >
        <el-button
          v-if="hasPermission('dlyrl:hr:news:news:del')"
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="del()"
          :disabled="dataListSelections.length <= 0"
          plain
          >删除
        </el-button>
        <el-button-group class="pull-right">
          <el-button
            v-if="hasPermission('dlyrl:hr:news:news:import')"
            type="default"
            size="small"
            icon="el-icon-upload2"
            title="导入"
            @click="isImportCollapse = !isImportCollapse"
          ></el-button>
          <el-button
            v-if="hasPermission('dlyrl:hr:news:news:export')"
            type="default"
            size="small"
            icon="el-icon-download"
            title="导出"
            @click="exportExcel()"
          ></el-button>
          <el-button
            type="default"
            size="small"
            icon="el-icon-refresh"
            @click="refreshList"
          >
          </el-button>
        </el-button-group>
      </el-row>
      <el-table
        :cell-style="cellStyle"
        style="border: 1px solid #d6cfe2"
        :header-cell-class-name="cellHeadStyle"
        :row-class-name="tableRowClassName"
        :data="dataList"
        size="small"
        height="calc(100% - 80px)"
        @selection-change="selectionChangeHandle"
        @sort-change="sortChangeHandle"
        v-loading="loading"
        class="table"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          show-overflow-tooltip 
          label="标题"
        >
          <!-- <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              v-if="hasPermission('dlyrl:hr:news:news:edit')"
              @click="edit(scope.row.id)"
              >{{ scope.row.title }}</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              v-else-if="hasPermission('dlyrl:hr:news:news:view')"
              @click="view(scope.row.id)"
              >{{ scope.row.title }}</el-link
            >
            <span v-else>{{ scope.row.title }}</span>
          </template> -->
            <template slot-scope="scope">
              <el-link  type="primary" :underline="false" @click="ToJpurnalism(scope.row.id,1)">{{scope.row.title}}</el-link>
            </template>
        </el-table-column>
        <el-table-column
          prop="author"
          show-overflow-tooltip 
          label="作者"
        >
        </el-table-column>
        <!-- <el-table-column
        prop="content"
        show-overflow-tooltip 
        label="内容">
        <template slot-scope="scope">
            <p v-html="$utils.unescapeHTML(scope.row.content)"></p>
        </template>
      </el-table-column> -->
        <el-table-column
          prop="newsType"
          show-overflow-tooltip 
          label="资讯类型"
        >
          <template slot-scope="scope">
            {{ $dictUtils.getDictLabel("news_type", scope.row.newsType, "-") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          show-overflow-tooltip 
          label="浏览次数"
        >
        </el-table-column>
        <el-table-column
          prop="source"
          show-overflow-tooltip 
          label="来源"
        >
        </el-table-column>
        <!-- <el-table-column
        prop="image"
        show-overflow-tooltip 
        label="图片">
        <template slot-scope="scope" v-if="scope.row.image">
            <a :href="item" target="_blank" :key="index" v-for="(item, index) in scope.row.image.split('|')">
                {{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
            </a>
        </template>
      </el-table-column> -->
        <el-table-column
          prop="fill"
          show-overflow-tooltip 
          label="自主填写"
        >
        </el-table-column>
        <el-table-column
          prop="linkurl"
          show-overflow-tooltip 
          label="链接地址"
        >
        </el-table-column>
        <el-table-column
          prop="showtype"
          show-overflow-tooltip 
          label="展示范围"
        >
          <template slot-scope="scope">
            {{ $dictUtils.getDictLabel("show_pc", scope.row.showtype, "-") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          show-overflow-tooltip 
          label="备注信息"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          :key="Math.random()"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="hasPermission('dlyrl:hr:news:news:view')"
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="view(scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="hasPermission('dlyrl:hr:news:news:edit')"
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              v-if="hasPermission('dlyrl:hr:news:news:del')"
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <NewsConsultForm ref="newsForm" @refreshDataList="refreshList"></NewsConsultForm>
  </div>
</template>

<script>
import tableStyles from "../../../../../utils/mixins.js";
import NewsConsultForm from "./NewsConsultForm";
import WangEditor from "@/components/editor/WangEditor";
export default {
  mixins: [tableStyles],
  data() {
    return {
      searchForm: {
        title: "",
        content: "",
        newsType: "",
        author: "",
        source: "",
        showtype: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
    };
  },
  components: {
    WangEditor,
    NewsConsultForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    //详情跳转
    ToJpurnalism(id,remark){
      this.$router.push({
          path: '/hiddenDirectory/newsDetail',
          name: 'newsDetail',
          params:{//一定要设置name，才可以传params
              id: id,
              remarks:remark
          }
      })
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/news/news/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          'remarks':1,
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.newsForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.newsForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.newsForm.init("view", id);
    },
    // 删除
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/news/news/delete",
          method: "delete",
          params: { ids: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download("/dlyrl/hr/news/news/import/template");
    },
    exportExcel() {
      let params = {
        ...this.searchForm,
      };
      this.$utils.download("/dlyrl/hr/news/news/export", params);
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>